<template>
  <div class="pages">
    <el-table :data="tableData" style="width: 97%">
      <el-table-column prop="index" label="序号" width="50">
        <template slot-scope="scope">
          <div>{{scope.$index + 1}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="推荐时间" width="180" :formatter="forUpdateTime"></el-table-column>
      <el-table-column prop="releaseTime" label="资讯发布时间" :formatter="forReleaseTime"></el-table-column>
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="classify" label="所属分类" :formatter="informationClassify"  width="100"></el-table-column>
      <el-table-column prop="type" label="类别" :formatter="forClass"  width="80"></el-table-column>
      <el-table-column prop="imageUrlList" align="center" label="封面">
        <template slot-scope="scope">
          <span
            v-for="(item, index) in scope.row.imageUrlList"
            :key="index"
            style="width:50px height:50px;display:inline-block; margin-right:10px"
          >
            <img :src="item" alt style="width:50px;height:50px">
          </span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="changeInformation(scope.row)">更换</el-button>
          <el-button
            type="text"
            size="small"
            @click="moveInformation(scope.row,0)"
            :disabled="scope.$index===0"
          >上移</el-button>
          <el-button
            type="text"
            size="small"
            @click="moveInformation(scope.row,1)"
            :disabled="scope.$index===tableData.length-1"
          >下移</el-button>
          <el-button type="text" size="small" @click="checkInformation(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="addInformation">
      <el-button type="primary" size="small" @click="addInformation">添加咨询</el-button>
    </div>
    <!-- 添加资讯 -->
    <el-dialog
      title="添加资讯"
      :visible.sync="dialogTableVisible"
      class="add-information"
      width="60%"
      height="500px"
    >
      <el-input
        v-model="searchInput"
        class="link-input"
        size="small"
        placeholder="请输入标题"
        width="200px"
      ></el-input>
      <el-button type="primary" size="small" @click="search">搜索</el-button>

      <div>
        <el-table :data="classList" stripe style="width: 100%">
          <el-table-column width="40">
            <template slot-scope="scope">
              <el-radio
                class="radio"
                v-model="radio"
                :label="scope.$index"
                @change.native="radioChange(scope.row)"
              ></el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="releaseTime" label="创建时间" width="180" :formatter="forReleaseTime"></el-table-column>
          <el-table-column prop="classify" label="分类" width="80" :formatter="informationClassify"></el-table-column>
          <el-table-column prop="title" label="标题"></el-table-column>
          <el-table-column prop="type" label="类型" :formatter="forClass" width="80"></el-table-column>
          <el-table-column prop="imageUrlList" align="center" label="封面">
            <template slot-scope="scope">
              <span
                v-for="(item, index) in scope.row.imageUrlList"
                :key="index"
                style="width:50px height:50px;display:inline-block; margin-right:10px"
              >
                <img :src="item" alt style="width:50px;height:50px">
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="isRecommend" label="状态" :formatter="isRecommend"  width="80"></el-table-column>
        </el-table>
        <div class="pageblock">
          <el-button size="small" type="primary" class="topage" @click="toPage">确定</el-button>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5,10,15,20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalItems"
          ></el-pagination>
        </div>
      </div>

      <div class="btnBox">
        <el-button type="primary" size="small" @click="confirmAdd">确定</el-button>
        <el-button size="small" @click="dialogTableVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import s from "@/util/state";
import u from "@/util";
import util from "@/util";
import {
  addRecommendMessage,
  replaceRecommendMessage,
  movementRecommendMessage,
  getRecommendMessageList,
  getMessageListPage
} from "@/api";
import { mapState } from "vuex";

export default {
  computed: mapState(["sub", "power", "merchantId"]),
  data() {
    return {
      tableData: [],
      dialogTableVisible: false,
      searchInput: "",
      classList: [],
      totalItems: 0,
      currentPage: 1,
      pageSize: 5,
      radio: "",
      selectRow: {},
      isAdd: true
    };
  },
  created() {
    this.getInformationList();
  },

  methods: {
    forClass: s.fenlei,
    isRecommend: s.isRecommend,
    informationClassify: s.informationClassify,
    forReleaseTime(row) {
      let year = u.foryear(parseInt(row.releaseTime));
      let time = u.fortime(parseInt(row.releaseTime));
      return year + " " + time;
    },
    forUpdateTime(row) {
      let year = u.foryear(parseInt(row.updateTime));
      let time = u.fortime(parseInt(row.updateTime));
      return year + " " + time;
    },
    getInformationList() {
      getRecommendMessageList({ shopId: this.merchantId }).then(res => {
  
        this.tableData = res.data.list;
      });
    },
    changeInformation(row) {
      this.isAdd = false;
      this.replaceId = row.id;
      this.addInformation();
    },
    moveInformation(row, movementType) {
      let data = {
        movementType: movementType,
        id: row.id,
        shopId: this.merchantId
      };
      movementRecommendMessage(data).then(res => {
        this.getInformationList();
        this.$message.success("移动成功");
      });
      movementType;
    },
    checkInformation(row) {
      util.routerTo(
        "/operate-management/information-management/information-list/information-articleLook",
        {
          ids: row.id
        }
      );
    },
    addInformation() {
      if (this.tableData.length === 3 && this.isAdd) {
        this.$message.error("咨询数量已经达到3条,您可以替换其他咨询");
      } else {
        let data = {
          orgId: this.merchantId,
          pageSize: this.pageSize,
          pageNum: this.currentPage
        };
        getMessageListPage(data).then(res => {
          this.classList = res.data.list;
          this.totalItems = res.data.pageTotal;
          this.dialogTableVisible = true;
        });
      }
    },
    search() {
      let data = {
        keyword: this.searchInput,
        orgId: this.merchantId,
        pageSize: this.pageSize,
        pageNum: this.currentPage
      };
      getMessageListPage(data).then(res => {
        this.classList = res.data.list;
        this.totalItems = res.data.pageTotal;
        
      });
    },
    toPage() {
      this.search()
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.search()
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.search()
    },
    confirmAdd() {
      if (this.isAdd) {
        let addData = {
          shopId: this.merchantId,
          id: this.selectRow.id
        };
        addRecommendMessage(addData).then(res => {
          if (res.code === 200) {
            this.getInformationList();
            this.dialogTableVisible = false;
            this.$message.success("添加成功");
          }
        });
      } else {
        let replaceData = {
          id: this.replaceId,
          replaceId: this.selectRow.id,
          shopId: this.merchantId
        };
        replaceRecommendMessage(replaceData).then(res => {
          if (res.code === 200) {
            this.getInformationList();
            this.dialogTableVisible = false;
            this.$message.success("替换成功");
          }
          this.isAdd = true;
        });
      }
      this.currentPage = 1
      this.radio = ''
    },
    radioChange(row) {
      this.selectRow = row;
    }
  }
};
</script>
<style scoped>
.pages {
  padding-top: 15px;
}
.addInformation {
  width: 97%;
  padding-top: 30px;
  text-align: right;
}
.add-information .el-input {
  width: 200px;
}
</style>
<style>
.add-information .el-radio__label {
  display: none;
}
</style>



